import style from "./index.module.scss"
export type CardData = {
    title: string
    imgUrl: string
    centerText: string
}

type Props = {
    cardData: CardData
    className?: string
}

export default function CaseCard(props: Props) {
    const { cardData: { title = "市政工程", imgUrl, centerText }, className } = props
    return (
        <div className={[style["case-card"], "h-130", "relative", className].join(" ")}>
            <div className={`case-img-box h-full w-full overflow-hidden`}>
                <img src={imgUrl} alt="" className={`w-full h-full case-img`} />
            </div>
            <div className={`top-angle absolute left-0 top-[-20px] h-[20px] w-[140px] flex justify-center items-center text-white`}>{title}</div>
            <div className={`circle w-[200px] h-[200px] absolute text-3xl text-center flex justify-center items-center text-white`}>{centerText}</div>
        </div>
    )
}
